<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--      引入js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>欢迎登录图书管理系统</title>
</head>

<body style="background-color: aliceblue">

<div class="container" style=" width:1200px;margin-left:550px;margin-top: 150px" >

    <div class="row clearfix" style="align-content: center">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>欢迎登录图书管理系统</small>
                </h1>
            </div>
        </div>
    </div>


            <form th:action="@{/login}" th:method="post">

                <div class="form-group">
                    <div class="row" >
                        <div class="col-md-1"><label for="usercount">用户账号 :</label></div>
                        <div class="col-md-3">  <input type="text" placeholder="请输入账号" onblur="return checkCount()" class="form-control" name="username" id="usercount" ></div>
                        <div class="col-md-2"> <span id="tipCount" style="color: red"></span></div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-1"><label for="pwd">用户密码 :</label></div>
                        <div class="col-md-3">  <input type="text" placeholder="请输入密码" onblur="return checkPwd()" class="form-control" name="password" id="pwd" ></div>
                        <div class="col-md-3"> <span id="tipPwd"  style="color: red"></span></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-1">
                        <button type="submit" class="btn btn-default" onclick="return checkform()" >登录</button>
                    </div>
                    <div class="col-md-1">
                        <a class="btn btn-default" th:href="@{/register}" >注册</a>
                    </div>
                    <div class="col-md-1">
                        <a class="btn btn-default" th:href="@{/hello}" >首页</a>
                    </div>
                </div>


            </form>




</div>

<script type="text/javascript">
    var patt1 = /^[0-9]+.?[0-9]*$/;//正则表达式验证是否为纯数字


    //一级验证账号
    function checkCount(){
        var usercount =$("#usercount").val();

        if (usercount == null || usercount == ''){
            $("#tipCount").text("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            $("#tipCount").text("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            $("#tipCount").text("账号长度1-8");
            return  false;
        }else {
            $("#tipCount").text(" ")
        }

    }

    //一级验证姓名
    function checkPwd(){
        var pwd  =$("#pwd").val();
        if (pwd == null || pwd == ''){
            $("#tipPwd").text("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >6){
            $("#tipPwd").text("密码4长度1-6!!!");
            return false;
        }else {
            $("#tipPwd").text(" ");
        }

    }

    //二级验证
    function checkform(){
        var usercount =$("#usercount").val();
        var pwd  =$("#pwd").val();

        if (usercount == null || usercount == ''){
            alert("账号不能为空，请输入账号");
            return false;
        }

        if (pwd == null || pwd == ''){
            alert("密码不能为空!!!");
            return false;
        }




    }

</script>
</body>
</html>